<template>
	<div style="height: 100%;width:1700px;color: black">
		<a-layout style="width:1700px;height: 100%;">
			<rootsleft active="1"></rootsleft>
			<a-layout-content
					style="flex: 0 0 1270px;min-width: 1270px;max-width: 1270px;width: 1270px;position: relative;left: 15px;background: #ffffff !important;">
				<right-top icon="2.png" text="互联网诈骗">
					<a-tabs default-active-key="1" style="position: absolute;right: 40px;top: 22px;font-weight: 400;" size="small"
					        @change="callback">
						<a-tab-pane key="1" tab="事件数据"></a-tab-pane>
						<a-tab-pane key="2" tab="统计分析" force-render></a-tab-pane>
					</a-tabs>
				</right-top>
				<div class="right-content" :style="{display:change===1?'':'none'}">
					<div class="titleDiv">
						<div class="titleFontDiv">
							<div class="fontBottomLine" style="">信息</div>
							概况
						</div>
						<div class="backButton" @click="back">返回</div>
					</div>
					<div
							style="height: 150px;margin-top: 15px;width: 96%;margin-left: 2%;background-color: #F7F7F7;padding: 10px 20px">
						<div style="font-size: 16px;display: flex">
							<div style="width: 8%;margin-left: 20px;">文章标题:</div>
							<div style="margin-left: -15px;">打击治理<span style="color: red">电信网络诈骗</span>犯罪限制的手机卡<span
									style="color: red">处理不当</span>小心<span>酿成大祸</span></div>
						</div>
						<div style="margin-top: 15px;display: flex">
							<div style="width: 15%;"><span style="font-weight: bold">【文章摘要】</span>:</div>
							根据最高法、最高检、公安部联合发布的《关于办理电信网络诈骗等刑事案件适用法律若干问题的意见(二))》,一旦不法分子借机从事违法犯罪活动,例如通讯诈骗、网络赌,根据刑法第二百八十七条之二规定,售卖电话卡的人会被认为存在"帮助"行为...实名制的手机卡卖给他人,就造成了实名不实人,一旦不法分子购买后实施诈骗...
						</div>
						<div style="display:flex;margin-top: 15px">
							<div style="width: 8%;margin-left: 27px;"><span style="font-weight: bold">【来源】</span>:</div>
							<div style="margin-left: -20px;">信用中国(吉林长春)-风险提示</div>
							<div style="width: 8%;margin-left: 25px;"><span style="font-weight: bold">【发布时间】</span>:</div>
							<div>2021-09-19 09:24:04</div>
						</div>
					</div>
					<div class="titleDiv">
						<div class="titleFontDiv">
							<div class="fontBottomLine" style="">关键</div>
							传播路径
						</div>
					</div>
					<div style="height: 500px;margin-top: 15px" id="treeChart">
					</div>
					<div class="titleDiv">
						<div class="titleFontDiv">
							<div class="fontBottomLine" style="">转载</div>
							媒体
						</div>
					</div>
					<div style="margin-top: 15px;width: 96%;margin-left: 2%">
						<a-table :columns="columns" rowKey="key" item-layout="vertical" size="large" :pagination="pagination"
						         :data-source="listData">

						</a-table>
					</div>
					<div class="titleDiv">
						<div class="titleFontDiv">
							<div class="fontBottomLine" style="">报道</div>
							量趋势
						</div>
					</div>
					<div style="height: 300px;margin-top: 15px" id="barChart">
					</div>
				</div>
				<div class="right-content" :style="{display:change===2?'':'none'}">
					<div class="titleDiv">
						<div class="titleFontDiv">
							<div class="fontBottomLine">事件</div>
							舆情量趋势
						</div>
					</div>
					<div id="lineChart"
					     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 300px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

					</div>
					<div style="display: flex">
						<div style="width: 50%">
							<div class="titleDiv">
								<div class="titleFontDiv">
									<div class="fontBottomLine">情感</div>
									分析
								</div>
							</div>
						</div>
						<div style="width: 50%">
							<div class="titleDiv">
								<div class="titleFontDiv">
									<div class="fontBottomLine">媒体</div>
									分类统计
								</div>
							</div>
						</div>
					</div>
					<div style="display: flex;width: 98%;margin-left: 1%;">
						<div style="width: 50%">
							<div id="pieChart"
							     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 400px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

							</div>
						</div>
						<div style="width: 50%">
							<div id="mediaBarChart"
							     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 400px;width: 595px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

							</div>
						</div>
					</div>
					<div class="titleDiv">
						<div class="titleFontDiv">
							<div class="fontBottomLine">热词</div>
							分布趋势
						</div>
						<div style="height: 100%;width: 60%;display: flex;justify-content: space-around;margin-right: 15px;">
							<div class="scatterLabel scatterLabelActive">全部</div>
							<div class="scatterLabel">微博</div>
							<div class="scatterLabel">热搜</div>
							<div class="scatterLabel">微信公众号</div>
							<div class="scatterLabel">APP</div>
							<div class="scatterLabel">新闻网站</div>
							<div class="scatterLabel">论坛</div>
							<div class="scatterLabel">安全技术网站</div>
						</div>
					</div>
					<div id="scatterChart"
					     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 350px;width: 1213px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

					</div>
				</div>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script>

import rootsleft from './rootsleft/index'
import rightTop from './right/top'

import {getInfo} from '@/api/system/info'
import echarts from 'echarts'

const columns = [
	{title: '站点', dataIndex: 'zd', align: 'center', ellipsis: true,},
	{title: '标题', dataIndex: 'bt', ellipsis: true, align: 'center'},
	{title: '发布时间', dataIndex: 'sj', ellipsis: true, align: 'center'},
];


const CubeLeft = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c0 = [shape.x, shape.y]
		const c1 = [shape.x - 9, shape.y - 9]
		const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
		const c3 = [xAxisPoint[0], xAxisPoint[1]]
		ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
	}
})
const CubeRight = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c1 = [shape.x, shape.y]
		const c2 = [xAxisPoint[0], xAxisPoint[1]]
		const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
		const c4 = [shape.x + 18, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
const CubeTop = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const c1 = [shape.x, shape.y]
		const c2 = [shape.x + 18, shape.y - 9]
		const c3 = [shape.x + 9, shape.y - 18]
		const c4 = [shape.x - 9, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]


export default {
	name: "generalDetectionroots",
	components: {
		rootsleft,
		rightTop
	},
	data() {
		return {
			change: 1,
			listData: [{zd: "财经头条", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-19 16:40:00"},
				{zd: "央视网", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-19 12:21:11"},
				{zd: "齐鲁壹点", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-19 15:54:00"},
				{zd: "河北新闻网", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-19 15:59:22"},
				{zd: "封面新闻", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-19 16:21:22"},
				{zd: "群众新闻", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-19 16:58:54"},
				{zd: "河南百度", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-20 15:11:13"},
				{zd: "光明网", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-20 15:23:54"},
				{zd: "快资讯", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-20 15:44:23"},
				{zd: "沈阳网新闻中心", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-20 15:49:46"},
				{zd: "一点资讯", bt: "闲置的手机卡处理不当小心酿成大祸", sj: "2021-09-20 16:58:11"},
			],
			pagination: {
				onChange: page => {
					console.log(page);
				},
				pageSize: 10,
			},
			actions: [
				{type: 'star-o', text: '156'},
				{type: 'like-o', text: '156'},
				{type: 'message', text: '2'},
			],
			labelCol: {span: 10},
			wrapperCol: {span: 14},
			columns,
			form: {
				name: '',
				region: undefined,
				date1: undefined,
				delivery: false,
				type: [],
				resource: '',
				desc: '',
			},
			myChartBar: undefined,
			myChartTree: undefined,
			myChartBottomLine: undefined,
			myChartMediaBar: undefined,
			myChartScatter: undefined,
			myChartPie: undefined,
			dataLevelLine1: [12, 80, 79, 27, 99, 43, 33],
			dataLevelLine2: [11, 76, 94, 23, 29, 77, 53],
			dataLevelLine3: [67, 62, 65, 35, 44, 69, 52],
			dataLevelDate: [],
		}
	},
	methods: {
		back() {
			this.$router.go(-1);//返回上一层
		},
		callback(tag) {
			if (tag == "1") {
				this.change = 1;
			}
			if (tag == "2") {
				this.change = 2;
			}
		},
		onSubmit() {
			console.log('submit!', this.form);
		},
		drawTree() {
			this.myChartTree = this.$echarts.init(document.getElementById('treeChart'))
			this.myChartTree.setOption({
				tooltip: {
					trigger: 'item',
					triggerOn: 'mousemove',
				},
				series: [
					{
						type: 'tree',
						roam: false,
						layout: 'orthogonal',
						orient: 'LR',
						symbol: 'emptyCircle',
						symbolSize: 10,
						left: 80,
						right: 120,
						top: 0,
						bottom: 0,
						initialTreeDepth: 5,
						label: {
							show: true,
							offset: [10, 0],
							align: 'left',
						},
						tooltip: {
							formatter: function (params) {
								return params.value.replace('/r/n', '<br />');
							},
						},
						data: [
							{
								name: '财经头条',
								value: '财经头条',
								label: {
									position: 'top',
									offset: [-23, 0],
								},
								children: [
									{
										name: '央视网',
										value: '央视网',
										label: {
											position: 'top',
											offset: [-19, 0],
										},
										children: [
											{
												name: '齐鲁壹点',
												value: '齐鲁壹点。',
												label: {
													position: 'top',
													offset: [-23, 0],
												},
											},
											{
												name: '河北新闻网',
												value: '河北新闻网',
												label: {
													position: 'top',
													offset: [-30, 0],
												},
											},
											{
												name: '封面新闻',
												value: '封面新闻',
												label: {
													position: 'top',
													offset: [-23, 0],
												},
												children: [
													{
														name: '一点资讯',
														value: '一点资讯',
														label: {
															position: 'top',
															offset: [-23, 0],
														},
														children: [
															{
																name: '百度百家',
																value: '百度百家',
																label: {
																	position: 'top',
																	offset: [-23, 0],
																},
																children: [
																	{
																		name: '搜狐新闻',
																		value: '搜狐新闻',
																		label: {
																			position: 'top',
																			offset: [-23, 0],
																		},
																	},
																],
															},
														],
													},
												],
											},
											{
												name: '群众新闻',
												value: '群众新闻',
												label: {
													position: 'top',
													offset: [-23, 0],
													color: 'red',
													fontWeight: 'bold',
													fontSize: '13',
												},
											},
											{
												name: '河南百度',
												value: '河南百度',
												label: {
													position: 'top',
													offset: [-23, 0],
												},
												children: [
													{
														name: '今日头条',
														value: '今日头条',
														label: {
															position: 'top',
															offset: [-23, 0],
														},
													},
												],
											},
											{
												name: '光明网',
												value: '光明网',
												label: {
													position: 'top',
													offset: [-19, 0],
												},
											},
											{
												name: '快资讯',
												value: '快资讯',
												label: {
													position: 'top',
													offset: [-19, 0],
												},
												children: [
													{
														name: '中国产业发展研...',
														value: '中国产业发展研究',
														label: {
															position: 'top',
															offset: [-42, 0],
														},
													},
												],
											},
											{
												name: '沈阳网新闻中心',
												value: '沈阳网新闻中心',
												label: {
													position: 'top',
													offset: [-37, 0],
												},
												children: [
													{
														name: '凯迪网',
														value: '凯迪网',
														label: {
															position: 'top',
															offset: [-19, 0],
														},
														children: [
															{
																name: '中国吉林网',
																value: '中国吉林网',
																label: {
																	position: 'top',
																	offset: [-31, 0],
																},
																children: [
																	{
																		name: '珲春热线',
																		value: '珲春热线',
																		label: {
																			position: 'top',
																			offset: [-23, 0],
																		},
																	},
																],
															},
														],
													},
												],
											},
										],
									},
								],
							},
						],
					},
				],
			})
		},
		drawBar() {
			this.myChartBar = this.$echarts.init(document.getElementById('barChart'))
			// 绘制图表
			this.myChartBar.setOption({
				backgroundColor: "white",
				grid: {
					left: 20,
					right: 40,
					bottom: 25,
					top: 20,
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: ['10-23', '10-24', '10-25', '10-26', '10-27', '10-28', '10-29', '10-30', '10-31', '11-01', '11-02', '11-03'],
					axisLine: {
						show: true,
						lineStyle: {
							color: '#9c9c9c'
						}
					},
					offset: 10,
					axisTick: {
						show: false,
						length: 9,
						alignWithLabel: true,
					},
					axisLabel: {
						fontSize: 14
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#9c9c9c'
						}
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						fontSize: 16
					},
					boundaryGap: ['20%', '20%']
				},
				series: [{
					type: 'custom',
					renderItem: function (params, api) {
						const location = api.coord([api.value(0), api.value(1)])
						return {
							type: 'group',
							children: [{
								type: 'CubeLeft',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: '#CEE2FE'
								}
							}, {
								type: 'CubeRight',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: '#E8F2FE'
								}
							}, {
								type: 'CubeTop',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: '#E7F1FD'
								}
							}]
						}
					},
					data: MAX
				}, {
					type: 'custom',
					renderItem: (params, api) => {
						const location = api.coord([api.value(0), api.value(1)])
						return {
							type: 'group',
							children: [{
								type: 'CubeLeft',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#4491FC'
									},
										{
											offset: 1,
											color: '#A3C8FC'
										}
									])
								}
							}, {
								type: 'CubeRight',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#4491FC'
									},
										{
											offset: 1,
											color: '#A3C8FC'
										}
									])
								}
							}, {
								type: 'CubeTop',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#4491FC'
									},
										{
											offset: 1,
											color: '#49BEE5'
										}
									])
								}
							}]
						}
					},
					data: VALUE
				}, {
					type: 'bar',
					label: {
						normal: {
							show: true,
							position: 'top',
							formatter: (e) => {
								switch (e.name) {
									case '10kV线路':
										return VALUE[0]
									case '公用配变':
										return VALUE[1]
									case '35kV主变':
										return VALUE[2]
									case '水':

								}
							},
							fontSize: 16,
							color: '#9c9c9c',
							offset: [4, -25]
						}
					},
					itemStyle: {
						color: 'transparent'
					},
					data: MAX
				}]
			});
		},
		drawLine() {

			let t = this
			let color = [
				'#FF5B00', '#FEAE31', '#5D80FD', '#67CC81'
			];

			let xAxisData = ['2021-10-28', '2021-10-29', '2021-10-30', '2021-10-31', '2021-11-01', '2021-11-02', '2021-11-03'];
			let yAxisData1 = this.dataLevelLine3;
			let yAxisData2 = this.dataLevelLine2;
			let yAxisData3 = this.dataLevelLine1;

			const hexToRgba = (hex, opacity) => {
				let rgbaColor = "";
				let reg = /^#[\da-f]{6}$/i;
				if (reg.test(hex)) {
					rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
							"0x" + hex.slice(3, 5)
					)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
				}
				return rgbaColor;
			}

			this.myChartBottomLine = this.$echarts.init(document.getElementById('lineChart'))
			// 绘制图表
			this.myChartBottomLine.setOption({
				color: color,
				legend: {
					top: 10,
					right: '40%',
					icon: 'rect',
					itemWidth: 12,
					itemHeight: 12,
					itemGap: 50,
				},
				tooltip: {
					trigger: "axis",
					formatter: function (params) {
						let html = '';
						params.forEach(v => {
							html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
                `;
						})
						return html
					},
					extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
				},
				grid: {
					top: 40,
					bottom: 15,
					left: 30,
					right: 50,
					containLabel: true
				},
				xAxis: [{
					type: "category",
					boundaryGap: false,
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: "#333"
						}
					},
					axisLine: {
						lineStyle: {
							color: "#D9D9D9"
						}
					},
					data: xAxisData,
				}],
				yAxis: [{
					show: false,
					type: "value",
					name: '数量',
					axisLabel: {
						textStyle: {
							color: "#666"
						}
					},
					nameTextStyle: {
						color: "#666",
						fontSize: 12,
						lineHeight: 10
					},
					// 分割线
					splitLine: {
						lineStyle: {
							type: "dashed",
							color: "#E9E9E9"
						}
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				}],
				series: [{
					// name: "2018",
					name: "负面",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[0],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[0], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
										offset: 0,
										color: hexToRgba(color[0], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[0], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[0], 0.1),
							shadowBlur: 10
						}
					},
					data: yAxisData1
				}, {
					name: "中性",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[1],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[1], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式 (实心点)
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
										offset: 0,
										color: hexToRgba(color[1], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[1], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[1], 0.1),
							shadowBlur: 10
						}
					},
					data: yAxisData2
				},
					{
						name: "正面",
						type: "line",
						smooth: true,
						symbolSize: 8,
						zlevel: 3,
						lineStyle: {
							normal: {
								color: color[2],
								shadowBlur: 3,
								shadowColor: hexToRgba(color[1], 0.5),
								shadowOffsetY: 8
							}
						},
						symbol: 'circle',//数据交叉点样式 (实心点)
						areaStyle: {
							normal: {
								color: new t.$echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
											offset: 0,
											color: hexToRgba(color[2], 0.3)
										},
											{
												offset: 1,
												color: hexToRgba(color[2], 0.1)
											}
										],
										false
								),
								shadowColor: hexToRgba(color[2], 0.1),
								shadowBlur: 10
							}
						},
						data: yAxisData3
					}]
			});
		},
		drawPie() {
			this.myChartPie = this.$echarts.init(document.getElementById('pieChart'))
			// 绘制图表
			this.myChartPie.setOption({

				tooltip: {
					show: true,
					trigger: 'item',
					formatter: "{b}",
					backgroundColor: '#F8F8F8',
					textStyle: {
						color: "#000000"
					}
				},
				legend: {
					itemWidth: 15,
					itemHeight: 15,
					itemGap: 80,
					top: 30,
				},
				series: [{
					roseType: 'area',
					name: '数量',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['50%', '60%'],
					data: [{value: 56, name: '正面'},
						{value: 36, name: '中性'},
						{value: 23, name: '负面'},],
					label: {
						normal: {
							color: 'black',
							show: false,
							position: 'center',
							formatter: '{b}情感\n{text|{c}}',
							rich: {
								text: {
									align: 'center',
									verticalAlign: 'middle',
									padding: 8,
									fontSize: 30,
									color: 'black'
								},
								value: {
									align: 'center',
									verticalAlign: 'middle',
									fontSize: 20
								}
							}
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: '12'
							}
						}
					},
					itemStyle: {
						normal: {
							color: function (params) {
								var colorList = ['#5D80FD', '#FEAE31', '#FF5B00'];
								return colorList[params.dataIndex]
							}
						}
					},
					labelLine: {
						normal: {
							show: true
						}
					}
				}]
			})

			this.myChartPie.on("mouseover", function (e) {
				var index = 0;
				if (e.dataIndex != index) {
					this.myChartPie.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
						dataIndex: index
					});
				}
			});
		},
		drawMediaBar() {
			let t = this;
			this.myChartMediaBar = this.$echarts.init(document.getElementById('mediaBarChart'))
			// 绘制图表
			this.myChartMediaBar.setOption({
				grid: {
					left: '2%',
					right: '4%',
					bottom: '2%',
					top: '2%',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					formatter: function (params) {
						return params[0].name + '<br/>' +
								"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
								params[0].seriesName + ' : ' + params[0].value + ' <br/>'
					}
				},
				xAxis: [{
					type: 'category',
					inverse: false,
					axisLabel: {
						show: true,
						margin: 15,
						interval: 0,
						textStyle: {
							color: 'black',
							fontSize: '14'
						},
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#D7DCED'
						}

					},
					data: ['微博', '热搜', '微信公众号', 'APP', '新闻网站', '论坛', '安全技术网站']
				}, {
					type: 'category',
					inverse: false,
					axisTick: 'none',
					axisLine: 'none',
					show: true,
					/*axisLabel: {
						textStyle: {
							color: 'black',
							fontSize: '14'
						},
					},*/
					data: [800, 700, 650, 600, 500, 400, 300]
				}],
				yAxis: {
					show: true,
					type: 'value',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#D7DCED'
						}
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: 'black',
							fontSize: '14'
						},
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
				},
				series: [{
					name: '数量',
					type: 'bar',
					zlevel: 1,
					itemStyle: {
						normal: {
							barBorderRadius: [0, 0, 0, 0],
							color: new t.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
								offset: 0,
								color: '#1677FE'
							}, {
								offset: 1,
								color: '#1677FE'
							}]),
							shadowBlur: 0,
							shadowColor: 'rgba(87,220,222,0.7)'
						},
					},
					barWidth: 10,
					data: [800, 700, 650, 600, 500, 400, 300]
				},
					{
						z: 0,
						name: '背景',
						type: 'bar',
						barWidth: 20,
						barGap: '-150%',
						data: [800, 800, 800, 800, 800, 800, 800],
						itemStyle: {
							normal: {
								color: '#F2F4F7',
								barBorderRadius: [0, 0, 0, 0],
							}
						},
						emphasis: {
							itemStyle: {
								color: '#F2F4F7',
								barBorderRadius: [0, 0, 0, 0],
							},
						}
					},
				]

			})
		},
		drawScatter() {
			//生成假数据用
			var tempData = [];
			var start = 1635408000000;//2021-10-29 12:00:00
			var end = 1635926400000;//2021-11-03 16:00:00
			var cha = 518400000;//上面两个变量相差
			for (var i = 0; i < 100; i++) {
				var random = Math.random() * cha
				var random2 = Math.random() * 120
				var resultTime = start + random
				tempData[i] = [resultTime, random2]
			}

			var today = new Date(new Date().toLocaleDateString())
			this.myChartScatter = this.$echarts.init(document.getElementById('scatterChart'))
			// 绘制图表
			this.myChartScatter.setOption({
				grid: {
					left: "6%",
					right: "6%",
					bottom: "11%",
				},
				xAxis: {
					min: start,
					max: end,
					type: "value",
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
					maxInterval: 24 * 60 * 60 * 1000,
					axisLabel: {
						interval: 24 * 60 * 60 * 1000,
						formatter: function (params) {
							var oDate = new Date(params);
							var oYear = oDate.getFullYear();
							var oMonth = oDate.getMonth() + 1;
							var oDay = oDate.getDate();
							//var  oTime = oYear +'-'+ (oMonth) +'-'+ (oDay);
							var oTime = (oMonth) + '-' + (oDay);
							return oTime;
						}
					},
					axisPointer: {
						show: false,
						snap: true,
						label: {
							formatter: function (params) {
								var oDate = new Date(params.value);
								var oYear = oDate.getFullYear();
								var oMonth = oDate.getMonth() + 1;
								var oDay = oDate.getDate();
								// var   oTime = oYear +'-'+ (oMonth) +'-'+ (oDay);
								var oTime = (oMonth) + '-' + (oDay);
								return oTime;
							},
							precision: 0//文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。
						}
					},
					axisTick: {
						show: false
					}
				},
				yAxis: {
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
				},
				series: [
					{
						symbolSize: 12,
						data: tempData,
						type: 'scatter',
						itemStyle: {
							color: "#5DB5E2"
						}
					}
				]
			})
		}
	},
	mounted() {
		getInfo().then(res => {
			//this.listData = res.data.list;
		}),

				this.drawBar();
		this.drawTree();
		this.drawLine();
		this.drawPie();
		this.drawMediaBar();
		this.drawScatter();

	}
}
</script>

<style scoped lang="scss">

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > span {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	margin-left: 30px;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

</style>
